<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学号+姓名+轻松一刻</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #fff;
        }
        .content-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            background: #F1F8E9;
        }
        th, td {
            padding: 15px;
            text-align: left;
            border: 1px solid #4CAF50;
        }
        th {
            background: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background: #E8F5E9;
        }
        .music-section {
            background: #F1F8E9;
            padding: 20px;
            border-radius: 8px;
            margin-top: 30px;
        }
        .music-controls {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        .lyrics-container {
            height: 300px;
            overflow-y: auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            border: 1px solid #4CAF50;
        }
        .lyrics-line {
            margin: 10px 0;
            transition: color 0.3s;
        }
        .lyrics-line.active {
            color: #4CAF50;
            font-weight: bold;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #2E7D32;
        }
        .audio-player {
            flex: 1;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentSong = 1;
            let isScrolling = true;
            
            // 歌词数据
            const lyrics = {
                song1: [
                    {time: 0, text: "轻音乐1 - 优美的旋律"},
                    {time: 3, text: "让我们沉浸在美妙的音乐中"},
                    {time: 6, text: "感受家乡的温馨与美好"},
                    {time: 9, text: "这里有最美的风景"},
                    {time: 12, text: "这里有最真的情谊"}
                ],
                song2: [
                    {time: 0, text: "轻音乐2 - 悠扬的乐章"},
                    {time: 3, text: "让音乐带我们回到家乡"},
                    {time: 6, text: "那里有我们最美好的回忆"},
                    {time: 9, text: "那里有我们最深的牵挂"},
                    {time: 12, text: "愿我们的家乡越来越美好"}
                ]
            };
            
            // 切换歌曲
            function switchSong() {
                currentSong = currentSong === 1 ? 2 : 1;
                const audio = document.getElementById('audioPlayer');
                audio.src = `assets/music/song${currentSong}.mp3`;
                audio.play();
                updateLyrics();
            }
            
            // 更新歌词显示
            function updateLyrics() {
                const currentLyrics = currentSong === 1 ? lyrics.song1 : lyrics.song2;
                const container = $('.lyrics-container');
                container.empty();
                
                currentLyrics.forEach(line => {
                    container.append(`<div class="lyrics-line" data-time="${line.time}">${line.text}</div>`);
                });
            }
            
            // 控制歌词滚动
            $('#toggleScroll').click(function() {
                isScrolling = !isScrolling;
                $(this).text(isScrolling ? '暂停滚动' : '继续滚动');
            });
            
            // 音频播放时更新歌词
            $('#audioPlayer').on('timeupdate', function() {
                if (!isScrolling) return;
                
                const currentTime = this.currentTime;
                const currentLyrics = currentSong === 1 ? lyrics.song1 : lyrics.song2;
                
                $('.lyrics-line').removeClass('active');
                
                for (let i = 0; i < currentLyrics.length; i++) {
                    if (currentTime >= currentLyrics[i].time && 
                        (i === currentLyrics.length - 1 || currentTime < currentLyrics[i + 1].time)) {
                        $(`.lyrics-line[data-time="${currentLyrics[i].time}"]`)
                            .addClass('active')
                            .get(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        break;
                    }
                }
            });
            
            // 初始化
            updateLyrics();
        });
    </script>
</head>
<body>
    <div class="content-container">
        <table>
            <tr>
                <th>类别</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>发展现状</td>
                <td>描述家乡的发展现状...</td>
            </tr>
            <tr>
                <td>自然环境</td>
                <td>描述家乡的自然环境...</td>
            </tr>
            <tr>
                <td>文化特色</td>
                <td>描述家乡的��化特色...</td>
            </tr>
            <tr>
                <td>特色美食</td>
                <td>描述家乡的特色美食...</td>
            </tr>
        </table>
        
        <div class="music-section">
            <div class="music-controls">
                <audio id="audioPlayer" class="audio-player" controls autoplay>
                    <source src="https://www.ytmp3.cn/down/76714.mp3" type="audio/mpeg">
                    您的浏览器不支持音频播放。
                </audio>
                <button onclick="switchSong()">切换歌曲</button>
                <button id="toggleScroll">暂停滚动</button>
            </div>
            
            <div class="lyrics-container">
                <!-- 歌词将通过JavaScript动态添加 -->
            </div>
        </div>
    </div>
</body>
</html> 